<template>
  <el-dialog
    class="gl_dialog_TitleLine"
    width="520px"
    title="绑定邮箱"
    :visible.sync="bindEmailDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <el-form
      ref="bindEmailInput"
      :model="bindEmailInput"
      :rules="bindEmailInput_Rules"
      label-width="80px"
      size="mini"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="22">
          <el-form-item label="新邮箱" prop="email">
            <el-input v-model.trim="bindEmailInput.email" type="text" placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="激活码" prop="code">
            <el-input v-model.trim="bindEmailInput.code" type="text" placeholder="请输入激活码" />
          </el-form-item>
        </el-col>
        <el-col :span="6" align="right">
          <el-button type="primary" style="width: 110px;" :loading="sendEmailCodeBtnLoading" :disabled="sendEmailCodeBtn" size="mini" @click="sendEmailCode">
            {{ sendEmailCodeBtn && sendEmailCodeTime + 's' || '发送激活码' }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-alert type="warning">
      <div slot="title" style="padding-left: 50px;">（激活码将发送到您的邮箱中）</div>
    </el-alert>
    <div slot="footer">
      <el-button size="mini" @click="bindEmailDialog = false">取 消</el-button>
      <el-button size="mini" :loading="dialogLoading" type="primary" @click="bindEmail">确认绑定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import validator from '@/lib/validate/index';
import { BindEmailInput } from '@/lib/form/swaggerForm';
import { api_POST_UsersBindEmail, api_POST_UsersBindEmailEmailCode } from '@/extend/api/swaggerApi/identity';
export default {
  data() {
    return {
      bindEmailDialog: false,
      dialogLoading: false,
      bindEmailInput: new BindEmailInput(),
      bindEmailInput_Rules: {
        email: [
          validator.required('请输入邮箱'),
          {
            validator (rule, value, callback) {
              callback(validator.checkMail(value, '邮箱格式错误！'));
            },
            trigger: 'blur'
          }
        ],
        code: [validator.required('请输入验证码')]
      },
      sendEmailCodeTime: 60,
      sendEmailCodeTimer: null,
      sendEmailCodeBtn: false,
      sendEmailCodeBtnLoading: false
    };
  },
  methods: {
    open() {
      this.bindEmailInput = new BindEmailInput();
      this.bindEmailDialog = true;
      this.$nextTick(() => {
        this.$refs.bindEmailInput.clearValidate();
        this.sendEmailCodeBtn = false;
        this.sendEmailCodeTime = 60;
        this.sendEmailCodeTimer && clearInterval(this.sendEmailCodeTimer);
      });
    },
    // 发送激活码
    sendEmailCode() {
      this.$refs.bindEmailInput.validateField('email', errorMessage => {
        if (errorMessage) return;
        this.sendEmailCodeBtnLoading = true;
        api_POST_UsersBindEmailEmailCode({ email: this.bindEmailInput.email }).then(res => {
          this.sendEmailCodeBtnLoading = false;
          this.sendEmailCodeTime = 60;
          this.sendEmailCodeBtn = true;
          this.sendEmailCodeTimer = setInterval(() => {
            if (this.sendEmailCodeTime <= 0) {
              this.sendEmailCodeBtn = false;
              clearInterval(this.sendEmailCodeTimer);
              this.sendEmailCodeTime = 60;
              return;
            }
            this.sendEmailCodeTime--;
          }, 1000);
          this.$message({ type: 'success', message: '发送激活码成功' });
        }, error => {
          this.sendEmailCodeBtnLoading = false;
          this.$message({ type: 'error', message: error.error && error.error.message || '' });
        });
      });
    },
    // 绑定邮箱
    bindEmail() {
      this.$refs.bindEmailInput.validate(valid => {
        if (!valid) return;
        this.dialogLoading = true;
        api_POST_UsersBindEmail(this.bindEmailInput).then(res => {
          this.dialogLoading = false;
          this.bindEmailDialog = false;
          this.$store.dispatch('user/getInfo', res);
          this.$message({ type: 'success', message: '绑定成功' });
        }, error => {
          this.dialogLoading = false;
          this.bindEmailDialog = false;
          this.$message({ type: 'error', message: error.error && error.error.message || '' });
        });
      });
    }
  }
};
</script>
